<!DOCTYPE html>
<html class="site-demo-overflow">
<head>
    <meta charset="utf-8">
    <title>才源软件科技通用开发平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/public/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/public/css/public.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/public/fullcalendar/css/fullcalendar.css">
    <style type="text/css">
        .e-box{
            display:none;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-300px;
            margin-top:-150px;
            background:#ffffff;
            border:1px solid #ccc;
            width:600px;
            height:300px;
            z-index:999999;
        }
        .e-boxbg{
            display:none;
            background:rgba(0,0,0,0.5);
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            z-index:99999;

        }

        body{
        }

    </style>


</head>

<body>

<div id='calendar' class="layui-col-lg8 layui-col-lg-offset2 layui-col-md10 layui-col-md-offset1"></div>
</body>
</html>

<script src='/public/js/jquery.min.js'></script>
<script src='/public/fullcalendar/js/jquery-ui-1.9.2.custom.min.js'></script>   <!-- 移动和拉伸 -->
<script src='/public/fullcalendar/js/fullcalendar.min.js'></script>
<script type="text/javascript">
    $(function() {

        $(".datepicker").datepicker();

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var today = new Date($.now());


        $('#calendar').fullCalendar({
            header: {
                left: 'prevYear prev today',  //逗号表示按钮组，空格代表独立个体
                center: 'title',
                right: 'month,agendaWeek,agendaDay next nextYear'
            },
            //	weekends:false,  //不显示周末，将会隐藏周六和周日
            firstDay:0,      //设置周日为第一天
            editable: true,
            timeFormat: 'H:mm',
            axisFormat: 'H:mm',
            weekMode: 'liquid',
            weekNumbers: true,   //是否显示周数
            weekNumberTitle:'周',

            dayClick:function(start,end,callback){    //当点击或者拖动等事件发生时，可以调用相关函数
                console.log("!!!!!!!!!!!!!!!!!")
                addEvent();
            },
            eventClick:function(calEvent, jsEvent, view){    //当点击事件时，可以调用相关函数
                //	alert("dd");
                console.log("W@@@@@@@@@@@@@@@@@@@@@")
            },
            //拖动事件
            eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
                console.log(event,dayDelta,minuteDelta,allDay,revertFunc)
            },
            //drag（拖拽）是修改日程的开始时间
            eventDragStop:function( event, jsEvent, ui, view ) {
                //console.log( event, jsEvent, ui, view)
            },
            //resize（调整）是修改日程的结束时间
            eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
                console.log(event,dayDelta,minuteDelta,revertFunc)
            },
            events: [
                {
                    title: '全天计划\r\n#####\r\n写代码',
                    start: new Date(y, m, 1)
                },
                {
                    title: '张家界四日游',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: '电话回访客户',
                    start: new Date(y, m, d-6, 16, 0),
                    allDay: false
                },
                {
                    title: '中秋放假',
                    start: '2013-09-19',
                    end: '2013-09-21'
                },
                {
                    title: '午饭',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                }
            ]
        });





        //	$(".datepicker").datepicker();

        $body=$("body");
        $titleVal=$(".titleVal");

        function addEvent(){
            /*var categoryClass = "bg-danger";//紧急
            var categoryClass1 = "bg-purple";//重要
            var categoryClass2 = "bg-primary";// 一般
            var categoryClass3 = "bg-success";// 普通
            var categoryClass4 = "bg-info";// 其它
            $('#calendar').fullCalendar('renderEvent',{
                title: "测试",
                start: '2018-09-20',
                end:'2018-09-21',
                className: categoryClass
            },true);
            $('#calendar').fullCalendar('renderEvent',{
                title: "测试",
                start: '2018-09-20',
                end:'2018-09-21',
                className: categoryClass1
            },true);
            $('#calendar').fullCalendar('renderEvent',{
                title: "测试",
                start: '2018-09-20',
                end:'2018-09-21',
                className: categoryClass2
            },true);
            $('#calendar').fullCalendar('renderEvent',{
                title: "测试",
                start: '2018-09-20',
                end:'2018-09-21',
                className: categoryClass3
            },true);
            $('#calendar').fullCalendar('renderEvent',{
                title: "测试",
                start: '2018-09-20',
                end:'2018-09-21',
                className: categoryClass4
            },true);*/
        }


        $("#isallday").click(function(){//是否是全天事件
            if($("#sel_start").css("display")=="none"){
                $("#sel_start,#sel_end").show();
            }else{
                $("#sel_start,#sel_end").hide();
            }
        });

        $("#isend").click(function(){//是否有结束时间
            if($("#p_endtime").css("display")=="none"){
                $("#p_endtime").show();
            }else{
                $("#p_endtime").hide();
            }
        });




        $("#boxClose").unbind('click').bind('click',function(){
            $body.css("overflow","auto");
            $(".e-boxbg").hide();
            $(".e-box").hide();
        });



    });
</script>

